<template>
    <div class="margin-container-list">

        <div class="table-container">
            <el-table :data="taskInfoList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                      v-loading="listLoading" element-loading-text="加载中"
                      style="width: 100%">
                <el-table-column min-width="150px" label="任务编码" prop="taskCode">
                </el-table-column>
                <el-table-column min-width="250px" label="任务名称" prop="taskName">
                </el-table-column>

                <el-table-column min-width="150px" label="任务酬金" prop="budgetAmount">
                </el-table-column>

            <!--    <el-table-column min-width="150px" label="任务模式" prop="taskType">
                    <template slot-scope="scope">
                        {{ dict.taskType[scope.row.taskType]}}
                    </template>
                </el-table-column>-->

              <el-table-column min-width="150px" label="任务模式" prop="taskType" align="center">

                <template slot-scope="scope" align="center">
                  <template v-if="scope.row.taskType == 1">
                    <template v-if="scope.row.remunerationType == 1 && scope.row.remunerationTypeModel == 12">
                      {{ dict.remunerationType[scope.row.remunerationType]}} | {{ dict.remunerationTypeModel[scope.row.remunerationTypeModel]}}
                    </template>
                    <template v-else-if="scope.row.remunerationType == 1 && scope.row.remunerationTypeModel == 11">
                      {{ dict.remunerationType[scope.row.remunerationType]}} | {{ dict.remunerationTypeModel[scope.row.remunerationTypeModel]}}
                    </template>
                    <template v-else>
                      {{ dict.remunerationType[scope.row.remunerationType]}}
                    </template>
                  </template>
                </template>
              </el-table-column>



              <el-table-column min-width="150px" label="微客" prop="memberName">
                </el-table-column>
                <el-table-column min-width="150px" label="结算方式" prop="settleType">
                    <template slot-scope="scope">
                        {{ dict.settleType[scope.row.settleType]}}
                    </template>
                </el-table-column>
                <el-table-column min-width="150px" label="验收内容" prop="remark">
                </el-table-column>
                <el-table-column min-width="150px" label="验收酬金" prop="amount">
                </el-table-column>
                <el-table-column min-width="180px" label="发起时间" prop="createTime" >
                </el-table-column>
                <el-table-column min-width="150px" label="验收状态" prop="paymentStatus">
                    <template slot-scope="scope">
                      {{ paymentStatuss[scope.row.paymentStatus]}}
                    </template>
                </el-table-column>

                <el-table-column width="120px" label="操作">
                    <template slot-scope="scope">
                        <!--<template v-if="scope.row.paymentStatus == '1' || scope.row.paymentStatus == '3'">-->
                            <!--<el-button type="primary" size="mini" @click="handleLayer(scope.row)">打款</el-button>-->
                        <!--</template>-->
                        <!--<el-button type="primary" size="mini" @click="handleDetails(scope.row)">查看</el-button>-->
                        <el-button type="primary" @click="handleDetails(scope.row)">
                            <template v-if="scope.row.paymentStatus == '1' || scope.row.paymentStatus == '3'">
                                去验收
                            </template>
                            <template v-else>
                                查看
                            </template>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 列表分页 -->
        <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="taskInfoListQuery.currentPage"
                           :page-sizes="[10, 20, 50, 100]" :page-size="taskInfoListQuery.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<style scoped>
.svg-icon{
    margin-right: 6px;

}
.wechatRadius{
    font-size: 26px;
}
.alipay{
    font-size: 60px;
    height: 30px;
}
.radio-txt{
    vertical-align: top;
    display: inline-block;
    padding-top: 6px;
}
.radio-border{
    border:#ccc 1px solid;
    vertical-align: middle;
    display: inline-block;
    padding: 5px 10px;
    width: 150px;
    height: 40px;
}
</style>

<script>
  import { pagingAppendAmount } from '@/api/project/taskInfo'

  export default {
    props: ['dict', 'paymentStatus', 'searchKeyword', 'taskType', 'datePicker'],
    data() {
      return {
        taskInfoList: [],
        paymentStatuss: [],
        starEndTime: [],
        taskCommissionId: '',
        activeName: '1',
        amount: 0,
        total: null,
        listLoading: true,
        keyword: '',
        keywordType: '',
        keywordTypeOld: '',
        multipleSelection: [],
        keywordTypes: [{
          value: 'taskCode',
          label: '任务编码'
        }, {
          value: 'taskName',
          label: '任务名称'
        }],
        taskInfoListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          paymentStatus: ''
        },
        taskInfo: {
          taskId: '',
          taskType: '',
          taskCode: '',
          taskName: '',
          budgetAmount: '',
          paymentStatus: '',
          paymentAmount: '',
          paymentTime: '',
          taskStatus: '',
          amount: ''
        },
        taskDetail: {
          taskId: '',
          paymentAmount: ''
        },
        financeVisible: false,
        financeTitle: null,
        form: {
          taskName: '',
          remunerationType: '1'
        },
        rules: {
          taskName: [
            { required: true, message: '任务酬金', trigger: 'blur' }
          ],
          remunerationType: [
            { required: true, message: '支付方式', trigger: 'blur' }
          ]
        },
        remunerationTypeTypes: [
          { key: '1', value: '支付宝', icon: 'alipay' },
          { key: '2', value: '微信支付', icon: 'wechatRadius' }
        ]
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },
    // 初始化页面
    created() {
      console.log('runtab')
    },
    methods: {
      initTaskCommissionList() {
        this.taskInfoList = []
        this.listLoading = true
        this.taskInfoListQuery.paymentStatus = this.paymentStatus
        this.taskInfoListQuery['taskName'] = this.searchKeyword
        this.taskInfoListQuery['taskType'] = this.taskType

        if (this.datePicker != null && this.datePicker.length > 0) {
          this.taskInfoListQuery['startDate'] = this.datePicker[0]
          this.taskInfoListQuery['endDate'] = this.datePicker[1]
        }

        pagingAppendAmount(this.taskInfoListQuery).then(response => {
          if (response.isError) return
          this.taskInfoList = response.records
          if (response.dict) {
            this.paymentStatuss = response.dict.paymentStatus
          }
          this.total = response.total
          this.listLoading = false
        })
      },
      setKeywordType() {
        // 重置搜索条件
        if (this.keywordTypeOld) {
          try {
            delete this.taskInfoListQuery[this.keywordTypeOld]
          } catch (e) {
            console.log(e)
          }
        }
        // 记录当前搜索条件
        this.taskInfoListQuery[this.keywordType] = this.keyword
        this.keywordTypeOld = this.keywordType
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.taskInfoListQuery.ascs = 'createTime'
            this.taskInfoListQuery.descs = ''
          } else {
            this.taskInfoListQuery.ascs = ''
            this.taskInfoListQuery.descs = 'createTime'
          }
        }
        this.initTaskCommissionList()
      },
      handleClick() {
        this.taskInfoListQuery.paymentStatus = this.activeName
        if (this.activeName === '3') {
          // 追加酬金列表页
          this.initTaskCommissionList()
        } else {
          this.initTaskCommissionList()
        }
      },
      handleSearch() {
        this.taskInfoListQuery.currentPage = 1
        this.initTaskCommissionList()
      },
      handleSizeChange(val) {
        this.taskInfoListQuery.size = val
        this.initTaskCommissionList()
      },
      handleCurrentChange(val) {
        this.taskInfoListQuery.currentPage = val
        this.initTaskCommissionList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 详情
      handleDetails(row) {
        console.log('handleDetails')
        const taskId = row.taskId
        this.$router.push({ path: '/project/task/detail/index', query: { taskId: taskId, taskType: row.taskType, taskStatus: row.taskStatus }})
        // this.$router.push({ path: '/finance/task-commission/detail/index', query: { taskId: row.taskId, taskType: row.taskType, taskStatus: row.taskStatus }})
      },
      // 更新任务状态
      handleUpdateStatus(row) {
      }
    },
    mounted() {
    }
  }

</script>
